<template>
  <div class="login_container">
    <div class="login_box">
      <!--1 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
      </div>
      <!--2 form表单区域 -->
      <el-form class="login_form" :model="LoginForm" :rules="loginFormRules" ref="loginFormRef" >
        <!-- ref='loginFormRef'  标记/引用实例对象 -->
        <!--2-1 用户名 -->
        <el-form-item prop="username">
          <el-input
            v-model="LoginForm.username"
            placeholder="请输入用户名"
            prefix-icon="iconfont icon-user"
          ></el-input>
        </el-form-item>
        <!--2-2 密码 -->
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="LoginForm.password"
            placeholder="请输入密码"
            prefix-icon="iconfont icon-3702mima"
          ></el-input>
        </el-form-item>
        <!--2-3 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      //这是表单的数据绑定对象 :model='LoginForm'
      LoginForm: {
        password: "123456",
        username: "admin",
      },
      //这是表单的验证规则对象  :rules='loginFormRules'
      loginFormRules: {
        //验证用户名是否合法 prop='username'
        username: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        //验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    resetLoginForm: function () {
      //ref='loginFormRef'  标记/引用实例对象 , 父传子
      //2-点击重置按钮，重置登录表单
      console.log(this); //this.$refs.loginFormRef--表单的引用实例对象
      this.$refs.loginFormRef.resetFields();
    },

    login() {
      //3-点击登录按钮，先进行表单数据的预验证，数据是否合法，若合法，才允许进行登录的网络请求
      //注意：要使用表单的引用实例对象来调用ref='loginFormRef'----验证函数validate

      this.$refs.loginFormRef.validate(async (valid) => {
        //valid--验证结果，布尔值true验证通过,false验证失败
        // console.log(valid);

        //3-1 根据验证结果进行判断，是否去进行网络请求
        if (!valid) {
          return; //false,验证失败，返回，不进行请求
        }
        //3-2 预校验通过，发起请求
        const ret = await this.$http.post("login", this.LoginForm); 
        // console.log(ret);
        const res = ret.data  
        // console.log(res);

        //3-3 根据登录结果，弹出提示框，提醒用户
        //先在element中导入按需组件，message,再挂载为Vue的全局属性
        if (res.meta.status !== 200) {
          // return console.log("登录失败！");
          return this.$message.error("登录失败！"+res.meta.msg);;
        }
        // console.log("登录成功");
        this.$message.success("登录成功")

      //3-4 将登录成功后的token ,保存到客户端的SessionStroage中----------------------
        //① 项目中除了登录之外的其他API接口，必须在登录之后才能访问
        //② token只应在当前网站打开期间生效，所有以将token保存在sessionStroage
      window.sessionStorage.setItem("token",res.data.token)
      //3-5 通过编程式导航跳转到后台主页，路由地址是/home
      this.$router.push('/home')

      //路由导航守卫，控制访问权限
  //如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。

        /* 参数是表单的数据绑定对象
          LoginForm: {
            password: "123456",
            username: "admin",} */
      });
    },
  },
};
//（1）表格组件提供了表单验证的功能，需要只通过rules属性传入约定的验证规则，并将表单项的prop属性设置为需校验的字段名即可。
//（2）resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
//（3）点击登录按钮前的预校验:点击登录按钮，不应该直接发起登录的网络请求；而是在发起请求前，先对表单数据进行预校验，只有验证通过后，才允许发起登录的网络请求；否则，提醒用户输入的表单内容不符合要求
//（4）怎样进行预验证：在点击登录按钮时，通过调用表单的--validate函数，对整个表单进行校验；参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise。Function(callback: Function(boolean, object))-----使用表单的引用实例对象来调用--ref='loginFormRef'
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
  .login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    //  <!--1 头像区域 -->
    .avatar_box {
      height: 130px;
      width: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
    // <!--2 form表单区域 -->
    .login_form {
      box-sizing: border-box;
      width: 100%;
      padding: 30px;
      position: absolute;
      bottom: 0;
      //  2-3 按钮区域
      .btns {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>